<template>
  <div class="layout-box">
    <div class="layout-box-header">
      <i class="icon-layout-box-title" />富文本编辑器（tinymce）
    </div>
    <div class="layout-box-content">
      <div>
        1、在public目录下新建tinymce目录
      </div>
      <div>
        2、在node_modules里面找到tinymce目录,将此目录下skins目录复制到public/tinymce里面
      </div>
      <div>
        3、如果需要汉化，需要下载汉化包，然后放到public/tinymce里面
      </div>
      <tinymce
        id="myedit"
        ref="editor"
        v-model="content"
        :disabled="disabled"
      />
      <div class="see-look">内容:</div>
      <span>{{ content }}</span>
      <div class="see-look">预览:</div>
      <div v-html="content" />
    </div>
  </div>
</template>
<script>
import tinymce from '@/components/TinymceEditor/index'
export default {
  components: {
    tinymce
  },
  data() {
    return {
      disabled: false,
      //   富文本内容
      content: ''
    }
  }
}
</script>
<style scoped>
.see-look{
  margin-top: 10px;
  color: #1565a7;
}
</style>
